Ext.define('App.commons.report.ExtendPolarChart', {
    extend: 'Ext.chart.PolarChart',
    alias: ['widget.ExtendPolarChart'],
    engine: 'Ext.draw.engine.Svg',
    legend: {
        listeners: {
            initialize: function () {
            }
        }
    },
    interactions: ['rotate', 'itemhighlight'],
    constructor: function (config) {
        var chartConfiguration = config.chartConfiguration;
        var datas = config.reportDatas;
        var kpis = config.kpis;
        var categoryAxis = this.findCategoryAxis(config.chartConfiguration.axes);
        var series = this.createSeries(chartConfiguration.series, categoryAxis);
        var store = this.createStore(kpis, datas);
        Ext.apply(config, {
            //初始化基础属性
            store: store,
            series: series,
            header: {title: '<span style="color:#666;font-size: 22px;line-height: 22px;">' + chartConfiguration.title + '</span>', style: 'background:#fff;'},
            height: chartConfiguration.height || 400,
            columnWidth: chartConfiguration.width || .5,
            theme: chartConfiguration.theme || 'default',
            innerPadding: 10,//从轴线开始到图Series内容的填充
            insetPadding: {//图边界到图内容的填充（有图例时，图例一边从图例位置开始算）
                top: Ext.isEmpty(chartConfiguration.description) ? 10 : 20,
                left: 10,
                right: 10,
                bottom: 10
            },
            sprites: [this.createDescriptionSprites(chartConfiguration.description)]
        });
        this.callParent(arguments);
    },
    createDescriptionSprites: function (description) {
        if (!Ext.isEmpty(description)) {
            return {
                type: 'text',
                text: description,
                fontSize: 12,
                fillStyle: '#999',
                x: 40, // the sprite x position
                y: 10 // the sprite y position
            };
        }
        return null;
    }
    ,
    createSeries: function (series, categoryAxis) {
        var me = this;
        var list = [];

        for (var i = 0; i < series.length; i++) {
            var item = series[i];
            for (var key in item) {
                if (item[key] == 'null') {
                    delete item[key];
                }
            }
            item.angleField = item.xField;
            //选中时高亮
            item.highlight = true;
            // item.donut = 30;
            //鼠标提示
            item.tooltip = {
                trackMouse: true,
                showDelay: 0,
                dismissDelay: 0,
                hideDelay: 0,
                renderer: function (tooltip, record, item) {
                    item.series._yField = [item.series._angleField];
                    for (var i = 0; i < item.series._yField.length; i++) {
                        if (item.series._yField[i] == item.field) {
                            var ax = Ext.Array.findBy(me.chartConfiguration.axes, function (ax) {
                                if (ax.fields == item.field) {
                                    return true;
                                }
                                return false;
                            })
                            var value = record.get(item.field);
                            if (!Ext.isEmpty(ax) && ax.percent == true) {
                                value = (value * 100 + '%');
                            }
                            var html = item.field + ' : ' + value;
                            tooltip.setHtml(html);
                            break;
                        }
                    }
                }
            }
            item.label = {
                field: categoryAxis.fields,
                display: 'rotate',
                renderer: function (text, sprite, config, rendererData, index) {
                    if (isNaN(text)) {
                        text = "";
                        return "";
                    } else {
                        var ax = Ext.Array.findBy(me.chartConfiguration.axes, function (ax) {
                            if (ax.fields == rendererData.angleField) {
                                return true;
                            }
                            return false;
                        })
                        var value = rendererData.store.getAt(index).get(rendererData.angleField);
                        if (!Ext.isEmpty(ax)) {
                            if (ax.percent == true) {
                                value = (value * 100 + '%');
                            }
                        }
                        var html = value + '';
                        return html;
                    }
                }
            }
            list.push(item);
        }
        return list;
    }
    ,
    createStore: function (kpis, datas) {
        var me = this;
        return Ext.create('Ext.data.Store', {
            fields: me.createFields(kpis),
            data: datas
        })
    }
    ,
    createFields: function (kpis) {
        var fields = [];
        Ext.Array.each(kpis, function (kpi) {
            fields.push(kpi.kpiConfiguration.field)
        });
        return fields;
    },
    findCategoryAxis: function (axes) {
        var axis = Ext.Array.findBy(axes, function (item) {
            if (item.type == 'category' || item.type == 'category3d') {
                return true;
            }
            return false;
        })
        return axis;
    }
})